<template>
    <div>
        <n-form 
            label-align="left"
            label-placement="left"
            label-width="60px"
            style="margin-top:25px" @submit.native.prevent
        >
            <n-form-item label="速度">
                <n-input-number v-model:value="target.velocity" style="width:120px" :min="0" :max="100">
                    <template #suffix>°</template>
                </n-input-number>
            </n-form-item>
            <n-form-item>
                <DebouncerSlider style="margin-left:10px; margin-right:10px" v-model:value="target.velocity" :min=0 :max=100 :marks="marks" :format-tooltip="(v:number)=>v+' %'" :delay="20"></DebouncerSlider>
            </n-form-item>
            <n-form-item label="方向">
                <n-switch v-model:value="target.clockwise" size="large" class="motor-direction" :rail-style="switchStyle">
                    <template #checked>
                        顺时针
                    </template>
                    <template #unchecked>
                        逆时针
                    </template>
                </n-switch>
            </n-form-item>
        </n-form>

    </div>
</template>

<script lang="ts" setup>
import { CSSProperties, ref } from 'vue'
import { conn } from '../../@beshell/conn-ts/Connection';
import { BeMotor } from '../../../../model/parts/Servo';
import { AppModel } from '../../../../model/AppModel';
import DebouncerSlider from '../../../common/DebouncerSlider.vue';

const props = defineProps<{
    model: AppModel ,
    target: BeMotor ,
}>()
const marks = {
    0: '停止' ,
    50: '中速' ,
    100: '全速' ,
}


function setup() {
    if(props.target) {
        conn.console.run(props.target.generateSetupCode()) ;
    }
}



function switchStyle({focused,checked}: {focused: boolean, checked: boolean }) {
    const style: CSSProperties = {}
    if (checked) {
        style.background = '#00a900'
        if (focused) {
            style.boxShadow = '0 0 0 2px #d0305040'
        }
    } else {
        style.background = '#2d8cf0'
        if (focused) {
            style.boxShadow = '0 0 0 2px #2080f040'
        }
    }
    return style
}

</script>